<template>
  <div>
    <a-button type="primary" @click="addItemField">新增</a-button>
    <a-modal
      title="新增字段"
      :visible="visible"
      :destroyOnClose="true"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="字段">
          <a-radio-group :default-value="'1'" :options="plainOptions" @change="onChange1" />
        </a-form-item>
        <a-form-item label="字段名称">
          <a-input placeholder="请输入字段名称" v-decorator="['fieldName', { rules: [{ required: true, message: '请输入字段名称!' }] }]" />
        </a-form-item>
        <a-form-item label="字段类型">
          <a-select
            placeholder="请选择字段类型"
            style="width: 100%"
            v-decorator="['fieldType', { rules: [{ required: true, message: '请选择字段类型!' }] }]"
          >
            <a-select-option v-for="i in fieldTypeArr[parseInt(type) - 1]" :key="i.value">{{ i.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="字段描述">
          <a-input placeholder="请输入字段描述" />
        </a-form-item>
      </a-form>
    </a-modal>
    <div class="box">
      <table border="0" width="100%">
        <tr class="tableTh">
          <th class="padd5" width="40%">字段名称</th>
          <th width="20%">类型</th>
          <th width="15%">状态</th>
          <th width="10%">必填</th>
          <th class="paddRig24" width="15%">操作</th>
        </tr>
        <!-- is="draggable" v-model="dataSource" animation="500" force-fallback="true" style="display: contents;" -->
        <tbody>
          <tr class="tableTd tableTdDis" v-for="i in dataSource" :key="i.id">
            <td class="padd5" width="40%">
              <a-icon class="tableIcon" type="unordered-list" />
              {{ i.value.fieldName }}
            </td>
            <td width="20%">{{ i.value.fieldType | typeFun }}</td>
            <td width="15%">
              <span class="statusShowClass" :class="!i.value.isOpen ? 'statusShowClass1' : ''"></span>
              {{ i.value.isOpen ? "已启用" : "已禁用" }}
            </td>
            <td width="10%">
              <a-checkbox v-if="i.value.isEdit === 0" v-model="i.value.isNecessary" disabled></a-checkbox>
              <a-checkbox v-else v-model="i.value.isNecessary" :disabled="i.value.isOpen ? false : true"></a-checkbox>
            </td>
            <td width="15%" class="showOperation paddRig24">
              <span :class="i.value.isOpen ? 'colA6A' : ''" v-if="!i.value.isRequired" @click="openShow(i)">{{
                i.value.isOpen ? "禁用" : "启用"
              }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="boxBottom">
      <a-button type="primary" style="margin-right:5px" @click="saveList">保存</a-button>
      <!-- <a-button @>取消</a-button> -->
    </div>
  </div>
</template>

<script>
const fieldTypeArr = [
  [
    { value: 1, label: "下拉选择器" },
    { value: 2, label: "单行输入框" },
    { value: 3, label: "日期选择器" },
    { value: 4, label: "多行输入框" },
    { value: 5, label: "数字输入框" },
    { value: 6, label: "地区选择器" }
  ],
  [{ value: 7, label: "上传图片" }]
];
import { saveForCustom, listDefaultField } from "./api";
import draggable from "vuedraggable";
export default {
  props: {
    sortedKeys: {
      type: Array,
      default: () => []
    },
    moduleCode: {
      type: String,
      default: ""
    }
  },
  watch: {
    sortedKeys: {
      handler: function(val, oldVal) {
        console.log("sortedKeys", val, this.field);
        this.listDefaultFieldFun();
      },
      immediate: true,
      deep: true
    }
  },
  filters: {
    typeFun(val) {
      if (val === 2) {
        return "输入框";
      } else if (val === 1) {
        return "下拉框";
      } else if (val === 3) {
        return "日期";
      } else if (val === 4) {
        return "多行输入框";
      } else if (val === 5) {
        return "数字框";
      } else if (val === 6) {
        return "地区选择";
      } else if (val === 7) {
        return "上传图片";
      } else {
        return val;
      }
    }
  },
  data() {
    return {
      field: [],
      type: "1",
      fieldTypeArr,
      form: this.$form.createForm(this, { name: "coordinated" }),
      plainOptions: [
        { label: "个人信息字段", value: "1" },
        { label: "材料附件字段", value: "2" }
      ],
      visible: false,
      confirmLoading: false,
      dataSource: []
    };
  },
  methods: {
    listDefaultFieldFun() {
      listDefaultField({ moduleCode: this.moduleCode })
        .then(res => {
          console.log(res);
          this.field = [...res.data.systemFieldList, ...res.data.additionalFieldList];
          this.getFun();
        })
        .catch(err => {
          console.log(err);
        });
    },
    onChange1(e) {
      console.log(e.target.value);
      this.type = e.target.value;
    },
    addItemField() {
      this.visible = true;
    },
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          const data = {
            ...values,
            moduleCode: this.moduleCode,
            companyId: this.type === "3" ? this.$store.state.hr.companyId : "site"
          };
          saveForCustom(data)
            .then(res => {
              this.confirmLoading = false;
              this.$message.success(res.msg);
              this.visible = false;
              this.listDefaultFieldFun();
            })
            .catch(err => {
              console.log(err);
              this.confirmLoading = false;
            });
        }
      });
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    compare(key) {
      return function(value1, value2) {
        var val1 = value1[key];
        var val2 = value2[key];
        return val1 - val2;
      };
    },
    openShow(i) {
      this.dataSource.find((z, index) => {
        if (z.id === i.id) {
          this.dataSource[index].value.isOpen = !z.value.isOpen;
        }
      });
    },
    saveList() {
      const data = this.dataSource.filter(z => z.value.isOpen).map(z => z.value);
      this.$emit("savetemplateList", data);
    },
    getFun() {
      let data = [];
      if (this.sortedKeys.length === 0) {
        data = this.field.map((i, index) => {
          return {
            id: index,
            value: i
          };
        });
      } else {
        data = this.field.map((i, index) => {
          const val = this.sortedKeys.find(z => z.fieldCode === i.fieldCode);
          return {
            id: index,
            value: val || i
          };
        });
      }
      this.dataSource = data.sort((a, b) => {
        return a.value.sort - b.value.sort;
      });
    }
  },
  created() {
    this.getFun();
  }
};
</script>

<style lang="scss" scoped>
.box {
  background: #f4f6fa;
  height: 80vh;
  overflow-y: auto;
}
.tableTh {
  height: 48px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #55565d;
  border-bottom: 1px solid #e8e8e8;
}
.tableTd {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #55565d;
}
.tableTdDis {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #a6a8b4;
}
.showOperation {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #6a66f6;
  cursor: pointer;
}
.hiddenOperation {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #a6a8b4;
  cursor: pointer;
}
.tableIcon {
  width: 13px;
  height: 11px;
  color: var(--primary);
  margin-right: 8px;
}
.padd5 {
  padding: 0 24px;
  cursor: pointer;
}
.paddRig24 {
  padding: 0 24px;
}
.boxBottom {
  height: 56px;
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  // box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12);
  // box-shadow: 0px -1px 6px 0px rgb(0 0 0 / 12%);
  line-height: 56px;
  position: fixed;
  width: 100%;
  bottom: 0;
  padding-left: 24px;
  margin-left: -23px;
}
.statusShowClass {
  width: 6px;
  height: 6px;
  background: #32ccaa;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}
.statusShowClass1 {
  background: rgba(0, 0, 0, 0.25);
}
.colA6A {
  color: #a6a8b4;
}
</style>
